<template>
    <div class="wraper iphone">
        <article class="mission-box">
            <section class="mission-top">
                <div class="mission-top-tit">
                    <img v-if="locale != 'ja'" src="../../static/images/rw-wz-eng.png" alt />
                    <img v-else src="../../static/images/rw-wz-jp.png" alt />
                </div>
                <div class="mission-amount-btn">
                    <span>{{ $t('missionWelfare') }}</span>
                    <strong>{{ showTotalNum }}</strong>
                </div>
                <div class="mission-top-msg" v-if="newGiftList.length">
                    <img src="../../static/images/rw-left.png" alt />
                    <span>{{$t('missionTitle')}}</span>
                    <img src="../../static/images/rw-left.png" alt />
                </div>
            </section>
            <!-- 体验金金额列表 -->
            <div class="mission-pd-box">
                <section class="mission-info" v-if="newGiftList.length">
                    <div
                        class="mission-item"
                        v-for="(item,ind) in newGiftList"
                        :key="ind"
                        v-if="item.type != 'register'"
                    >
                        <div class="item-left">
                            <div class="mission-amount" :class="{'dis': item.state}">
                                $
                                <span :class="{'red': item.price == 50}">{{item.price}}</span>
                            </div>
                            <div class="mission-tit">
                                <p>{{item.tit }}</p>
                                <span>
                                    <a
                                        v-if="item.id == 1"
                                        @click.prevent="flowoLink"
                                    >{{ item.desc }}</a>
                                    <span v-else>{{ item.desc }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="item-right">
                            <span class="btn dis" v-if="item.state">{{ $t('missionBtn2') }}</span>
                            <span
                                class="btn"
                                @click="jump(item.link,item.state)"
                                v-else
                            >{{ $t('missionBtn') }}</span>
                        </div>
                    </div>
                </section>
            </div>
            <!-- 规则信息 -->
            <article class="mission-rule">
                <div class="mission-top-msg">
                    <img src="../../static/images/rw-left.png" alt />
                    <span>{{$t('missionRuleT')}}</span>
                    <img src="../../static/images/rw-left.png" alt />
                </div>
                <div class="mission-pd-box">
                    <div class="mission-info">
                        <div class="rule-box">
                            <ul class="rule-list">
                                <li>
                                    <span>1.</span>
                                    <span>{{$t('missionRuleList1')}}</span>
                                </li>
                                <li>
                                    <span>2.</span>
                                    <span>{{$t('missionRuleList2')}}</span>
                                </li>
                                <li>
                                    <span>3.</span>
                                    <span>{{$t('missionRuleList3')}}</span>
                                </li>
                                <li>
                                    <span>4.</span>
                                    <span>{{$t('missionRuleList4')}}</span>
                                </li>
                                <li>
                                    <span>5.</span>
                                    <span>{{$t('missionRuleList5')}}</span>
                                </li>
                                <li>
                                    <span>6.</span>
                                    <span>{{$t('missionRuleList6')}}</span>
                                </li>
                                <li>
                                    <span>7.</span>
                                    <span>
                                        {{$t('missionRuleList7')}}
                                        <a
                                            @click.prevent="junpFun(helpRuleLink[locale])"
                                        >{{$t('missionRuleList8')}} >></a>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </article>
        </article>
    </div>
</template>
<script src="./missionCenter.js"></script>
<style scoped>
@import "./missionCenter.css";
</style>